<script setup>
import {computed, onMounted, ref, watch} from "vue";
import CommentPost from "@/views/Article/CommentPost.vue";
import CommentListItem from "@/views/Article/CommentListItem.vue";
import {useUserStore} from "@/stores/index.js";
import {ElMessage} from "element-plus";
import {commentAPI} from "@/apis/index.js";
import {useRoute} from "vue-router";

const userStore = useUserStore();

const route = useRoute();
const loading = ref(false);
const commentListInfo = ref({})

const props = defineProps({
  articleId: {
    type: Number,
  },
  articleUserId: {
    type: Number,
  },
  allowComment: {
    type: Boolean,
  }
});

// 分页
const pagination = ref({
  totalCount: 0,
  pageSize: 10,
  pageNo: 1,
  pageTotal: 0
})

const currentUserInfo = computed(() => userStore.userInfo || {})

const orderType = ref(0);

// 获取评论列表
const fetchComments = async (params) => {
  const data = {
    pageNo: pagination.value.pageNo,
    pageSize: pagination.value.pageSize,
    articleId: props.articleId,
    orderType: orderType.value,
  }
  loading.value = true
  try {
    const response = await commentAPI.getComments(data)
    if (response.status === 'success') {
      commentListInfo.value = response.data.list
      pagination.value = {
        pageNo: response.data.pageNo,
        pageSize: response.data.pageSize,
        totalCount: response.data.totalCount,
        pageTotal: response.data.pageTotal
      }
      return response
    }
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}

// 改变排序
const orderChange = (type) => {
  orderType.value = type
  fetchComments()
}

// 改变页码
const handlePageChange = (page) => {
  pagination.value.pageNo = page
  fetchComments()
}

// 处理评论发布完成事件
const handleCommentPublished = () => {
  // 重新获取评论列表
  fetchComments()
}

// 加载数据
const loadData =  () => {
  fetchComments()
}

onMounted(() => {
  loadData()
})

watch(() => route.params.articleId, loadData)
</script>

<template>
  <div class="comment-body">
    <!--评论标题-->
    <div class="comment-title">
      <div class="title">
        Comment<span class="count">{{ pagination.total }}</span>
      </div>
      <div class="tab">
        <span
            @click="orderChange(0)"
            :class="['tab-item', orderType == 0 ? 'active' : '']"
        >Latest</span
        >
        <el-divider direction="vertical" />
        <span
            @click="orderChange(1)"
            :class="['tab-item', orderType == 1 ? 'active' : '']"
        >
          Most likes
        </span>
      </div>
    </div>
    <!--评论输入-->
    <div class="skeleton" v-if="loading">
      <el-skeleton :row="3" animated></el-skeleton>
    </div>
    <template v-else>
      <div class="comment-form-panel" >
        <CommentPost
            :articleId="articleId"
            :pCommentId="0"
            :reply-user-id="0"
            :userInfo="currentUserInfo"
            :allowComment="allowComment"
            @comment-published="handleCommentPublished"
        ></CommentPost>
      </div>
      <!--评论列表-->
      <div class="comment-list" >
        <!-- 空评论提示 -->
        <div v-if="!commentListInfo || commentListInfo.length === 0">
          <el-empty description="Currently no comments, come and post your first comment!" />
        </div>
        <!-- 评论列表 -->
        <div v-else>
          <div v-for="item in commentListInfo">
            <CommentListItem
                :articleId="articleId"
                :commentData="item"
                :articleUserId="articleUserId"
                :currentUserInfo="currentUserInfo"
                :allowComment="allowComment"
                @refresh-comments="handleCommentPublished"
            ></CommentListItem>
          </div>
          <div class="pagination" v-if="pagination.pageTotal > 1">
            <el-pagination
                background
                :total="pagination.totalCount"
                :current-page.sync="pagination.pageNo"
                layout="prev, pager, next"
                @current-change="handlePageChange"
                style="text-align: right"
                :page-size="pagination.pageSize"
            ></el-pagination>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped lang="scss">
.comment-body {
  .comment-title {
    display: flex;
    align-items: center;
    .title {
      font-size: 20px;
      .count {
        font-size: 14px;
        padding: 0px 10px;
      }
    }
    .tab {
      .tab-item {
        cursor: pointer;
      }
      .active {
        color: var(--link);
      }
    }
  }
  .skeleton {
    margin-top: 10px;
  }

  .comment-form-panel {
    margin-top: 20px;
  }
  .comment-list{
    .pagination {
      padding: 10px 0px 10px 10px;
    }
  }
}
</style>